<template>
  <div class="grid">
    <div>
<!--      <loading _nghost-ng-cli-universal-c62="">&lt;!&ndash;&ndash;&gt;&lt;!&ndash;&ndash;&gt;</loading>-->
    </div>
    <div class="pay-panel">
      <div class="card p-4 shadow-2">
        <div>

          <el-form ref="from" :model="form" :rules="rules">
            <el-form-item prop="account" :label="$t('支付宝账户')" v-if="isAli">
              <el-input type="input"
                        id="topUpCredit-input"
                        :placeholder="$t('请输入支付宝账户')"
                        v-model="form.account"
                        >
              </el-input>
            </el-form-item>

            <el-form-item prop="name" :label="$t('支付宝账户实名')" v-if="isAli">
              <el-input type="input"
                        id="topUpCredit-input"
                        :placeholder="$t('请输入支付宝账户实名')"
                        v-model="form.name"
                        >
              </el-input>
            </el-form-item>

            <el-form-item prop="amount" :label="$t('提现金额')">
              <el-input type="number"
                        id="topUpCredit-input"
                        min="1"
                        :placeholder="$t('输入提现金额 (CNY)')"
                        v-model="form.amount">

              </el-input>
            </el-form-item>
          </el-form>

        </div>
        <div class="ng-star-inserted">
          <div class="field-radiobutton">
              <el-radio-group v-model="radio" @change="changeType" style="display: flex;flex-wrap: nowrap;">
                <el-radio style="width: 50%" name="aliPay" value="0" inputid="aliPay" :label="0">
                  <label for="aliPay"
                         class="mr-3 ng-star-inserted">{{$t('支付宝提现')}}
                  </label>
                </el-radio>
                <el-radio name="weChatPay" inputid="weChatPay" value="1" :label="1">
                  <label for="weChatPay"
                         class="mr-3 ng-star-inserted">{{$t('微信提现')}}
                  </label>
                </el-radio>
              </el-radio-group>
          </div>
        </div><!----><!---->
        <div class="mt-1">
          <div style="text-align: center;"><span style="font-size: 12pt;"><strong>{{$t('温馨提示')}}</strong></span></div>
          <div style="text-align: left;"><span style="font-size: 10pt; color: rgb(224, 62, 45);">{{$t('提现金额＜100时不支持提现，仅能用于平台消费')}}；</span>
          </div>
        </div>
        <div class="mt-2 mb-2" style="display: flex">
          <el-checkbox id="agreeTerm"
                       v-model="agreeCheck"
                       style="width: fit-content"
                       name="agreeTerm">
            <label for="agreeTerm" class="font-semibold" style="color: red; padding-bottom: 2px;">{{$t('我已查看以上说明')}}</label>
          </el-checkbox>
        </div>
        <div class="mt-3 text-center">
          <el-button :disabled="!agreeCheck" @click="submit" class="p-ripple p-element mt-2 p-button p-component p-disabled">
            <span class="p-button-label ng-star-inserted">{{$t('确认提现')}}</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import apiService from '@/api/apiService';
import Vue from "vue";

export default {
  // eslint-disable-next-line
  name: "Withdrawal",
  data() {
    return {
      visible: false,
      radio: 0,
      agreeCheck: false,
      isAli: true,
      form:{
        amount: 100,
        account:'',
        name:''
      },
      apiRes: {}, // 接口返回数据包
      rules:{
        amount:[
          { required: true, message: this.$t('金额不能为空'), trigger: 'blur' },
          { validator:this.validateAmount, trigger: 'blur' }
        ],
        account:[
          { required: true, message: this.$t('支付宝账户不能为空'), trigger: 'blur' },
        ],
        name:[
          { required: true, message: this.$t('支付宝账户实名不能为空'), trigger: 'blur' },
        ]
      },
      user:null,
    };
  },
  methods: {
    changeType(value) {
      this.resetForm()
      if(value === 1) {
        this.isAli = false

      }else {
        this.isAli = true
      }
    },
    resetForm(){
      this.form.amount = 100
      this.form.account = ''
      this.form.name = ''
    },
    submit(){
      this.$refs.from.validate((valid) => {
        if (!valid){
          return false;
        }
        const req = {
          account:this.form.account,
          amount: this.form.amount,
          accountName: this.form.name,
          type : this.radio
        }
        console.log(req)
        apiService.post('/withdrawal',req).then(res=>{
          if(res.code === 0) {
            this.$message.success(res.data)
          }else{
            Vue.prototype.$message.error(res.msg);
          }
        })
      });
    },
    validateAmount(rule, value, callback) {
      value = `${value}`.trim()
      let n = Number(value)
      if (isNaN(n)) {
        return callback(new Error('请输入数字'))
      }
      if (n === 0) {
        return callback()
      }
      // 可见小数位
      let { message } = rule
      const reg = new RegExp(`^[1-9]\\d*$`)
      if (value && !reg.test(value)) {
        callback(new Error(message || '只允许输入正整数'))
      }else if(value< 100){
        callback(new Error('最低提现金额100'))
      } else {
        return callback()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-panel {
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  border: solid white 1px;
  background: rgb(255, 255, 255);
  margin: auto;
  width: 95%;
}

.shadow-2 {
  margin: auto;
  width: 90%;
  padding: 20px 20px 20px 20px;
}

.text-c-101{
  width: 100%;text-align: left;
  font-weight: bolder;
  margin-bottom: 10px;
}

.text-c-102{
  width: 100%;text-align: left;
  font-weight: bolder;
  margin-bottom: 2px;
}

.mb-2 {

}
</style>
